<template>
  <div class="formArea">
    <el-form :model="form" :rules="rules" ref="form">
      <el-form-item class="label" prop='name'>
        <el-input maxlength="15" autocomplete="off" placeholder="请输入用户名" v-model="form.name">
          <!-- onkeyup="this.value=this.value.replace(/[ /_]/g,'')" -->
          <template slot="prepend"><img class="iconImg" src="../../../../assets/image/pc/user.png" alt=""></template>
        </el-input>
      </el-form-item>
      <el-form-item class="label" prop='pwd'>
        <el-input maxlength="12" @keyup.native="form.pwd=form.pwd.replace(/[ ]/g,'')" :type="visible ? 'text' : 'password'" autocomplete="off" placeholder="请输入密码" v-model="form.pwd">
          <template slot="prepend"><img class="iconImg" src="../../../../assets/image/pc/pwd.png" alt=""></template>
          <template slot="append">
            <img class="showIcon" v-if="!visible" @click="visible = !visible" src="../../../../assets/image/pc/hide.png" alt="">
            <img class="showIcon" v-else @click="visible = !visible" src="../../../../assets/image/pc/show.png" alt="">
          </template>
        </el-input>
      </el-form-item>
      <el-form-item class="label" prop='confirmPwd'>
        <el-input maxlength="12" @keyup.native="form.confirmPwd=form.confirmPwd.replace(/[ ]/g,'')" :type="visibleAgain ? 'text' : 'password'" autocomplete="off" placeholder="请再次输入密码" v-model="form.confirmPwd">
          <template slot="prepend"><img class="iconImg" src="../../../../assets/image/pc/pwd.png" alt=""></template>
          <template slot="append">
            <img class="showIcon" v-if="!visibleAgain" @click="visibleAgain = !visibleAgain" src="../../../../assets/image/pc/hide.png" alt="">
            <img class="showIcon" v-else @click="visibleAgain = !visibleAgain" src="../../../../assets/image/pc/show.png" alt="">
          </template>
        </el-input>
      </el-form-item>
      <el-form-item class="label" prop='phoneNumber'>
        <el-input autocomplete="off" placeholder="请输入手机号" v-model="form.phoneNumber">
          <template slot="prepend"><img class="iconImg" src="../../../../assets/image/pc/phone.png" alt=""></template>
        </el-input>
      </el-form-item>
      <div class="flex">
        <el-form-item class="label" prop='code' style="width: 58%;">
          <el-input maxlength="6" @keyup.enter.native="getCode()" type="text" autocomplete="off" placeholder="请输入验证码" v-model="form.code">
            <template slot="prepend"><img class="iconImg" src="../../../../assets/image/pc/code.png" alt=""></template>
          </el-input>
        </el-form-item>
        <p class="codeBtn" v-if="!isTip" @click="getCode">获取验证码</p>
        <p class="tips" v-else>{{number}}s</p>
      </div>
    </el-form>
    <el-button class="primary" type="primary" :loading="isLogin" @click="registerUser">快速注册</el-button>
    <p class="checkArea">
      <span class="phone cursor" @click="$parent.areaType = 1;">已有账号去登录</span>
    </p>
  </div>
</template>

<script>
import {registerUser, getRegCode} from '@/api/login.js';

export default {
  name: "UserRegistration",
  data() {
    var validatePhonenumber = (rule, value, callback) => {
      if (this.phoneReg.test(value)) {
        callback();
      } else {
        callback(new Error('手机号格式错误'));
      }
    };
    var validatePwd = (rule, value, callback) => {
      if(!this.pwdReg.test(value)) {
        callback(new Error('6-12位字母+数字组合，可含特殊字符'));
      }else{
        callback();
      }
    };
    var validateConfirmPwd = (rule, value, callback) => {
      if(!this.pwdReg.test(value)) {
        callback(new Error('6-12位字母+数字组合，可含特殊字符'));
      }else{
        if (this.form.pwd === this.form.confirmPwd) {
          callback();
        }else {
          callback(new Error('两次输入密码不一致'));
        }
      }
    };
    var validateUserName = (rule, value, callback) => {
      if (!this.nameReg.test(value)) {
        callback(new Error('英文或英文+数字组合，不超过15个字符'));
      } else {
        callback();
      }
    };
    return {
      form: {
        name: '',
        pwd: '',
        code: '',
        phoneNumber: '',
        confirmPwd: '',
      },
      isLogin: false,
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { validator: validateUserName, trigger: 'blur' }
        ],
        pwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { validator: validatePwd, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
        ],
        phoneNumber: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { validator: validatePhonenumber, trigger: 'blur' }
        ],
        confirmPwd: [
          { required: true, message: "请再次输入新密码", trigger: 'blur' },
          { min: 6, max: 12, message: '6-12位字母+数字组合，可含特殊字符', trigger: 'blur' },
          { validator: validateConfirmPwd, trigger: 'blur' }
        ],
      },
      isFocus: false,
      isTip: false,
      number: 0,
      visible: false,
      visibleAgain: false
    };
  },
  methods: {
    getCode() {
      this.form.phoneNumber = this.trim(this.form.phoneNumber);
      this.$refs['form'].validateField('phoneNumber', (error) => {
        if(!error){
          getRegCode({
            userName: this.form.phoneNumber
          }).then(res => {
            this.$message.success('获取验证码成功');
            this.form.uuid = res;
            this.isTip = true;
            this.number = 60;
            this.codeInerval = setInterval(() => {
              if(this.number > 0){
                this.number--;
              }else{
                clearInterval(this.codeInerval);
                this.isTip = false;
              }
            }, 1000)
          }).catch(error => {
            console.error(error)
          });
        }
      })
    },
    registerUser() {
      this.form.name = this.trim(this.form.name);
      this.form.phoneNumber = this.trim(this.form.phoneNumber);
      this.form.code = this.trim(this.form.code);
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.isLogin = true;
          registerUser({
            userName: this.form.name,
            phonenumber: this.form.phoneNumber,
            uuid: this.form.uuid,
            code: this.form.code,
            password: this.form.pwd,
            sourceCode: 'fraud_system',
          }).then(res => {
            this.$message.success('注册成功');
            this.$parent.areaType = 1;
          }).catch(error => {
            console.error(error)
            this.isLogin = false;
          });
        } else {
          return false;
        }
      });
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang='scss' scoped>
.formArea{
  width: 100%;
  .primary{
    width: 100%;
    margin-top: 20px;
  }
  .showIcon{
    height: 16px;
    position: relative;
    top: -2px;
    display: inline-block;
    cursor: pointer;
  }
  .errBtn{
    cursor: not-allowed;
  }
  .codeBtn{
    width: 34%;
    font-size: 14px;
    line-height: 38px;
    height: 38px;
    text-align: center;
    color: #fff;
    cursor: pointer;
    background-color: #4F5CA7;
    border-radius: 5px;
  }
  .tips{
    line-height: 37px;
    color: #76838F;
    font-size: 14px;
    width: 110px;
    height: 37px;
    border-radius: 5px;
    background-color: #F2F4F5;
    text-align: center;
  }
  .checkArea{
    margin-top: 20px;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
    text-align: right;
    .cursor{
      cursor: pointer;
      &:hover{
        text-decoration: underline;
      }
    }
    .phone{
      color: #C1CCEC;
    }
  }
}
.flex{
  justify-content: space-between;
  align-items: flex-start;
}
</style>
<style lang="scss">
</style>
